import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Button ,Toast} from 'antd-mobile'
import { LeftOutline,RightOutline, } from 'antd-mobile-icons'
import './edit.scss'
import { useDispatch } from 'react-redux'
import { CLEAR_USER } from '../../../store/actionType'

export default function Edit() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  return (
    <div>
      <div className='edit_back'>
        <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
        个人资料
      </div>
      <div className='edit_main'>
        <ul>
          <li><span>头像</span> <i><RightOutline /></i></li>
          <li><span>我的信息</span><i><RightOutline /></i></li>
          <li><span>绑定手机</span> <span></span><i><RightOutline /></i></li>
          <li><span>修改密码</span><i><RightOutline /></i></li>
          <li><span>注销账户</span><i><RightOutline /></i></li>
        </ul>
        <div className='edit_foot' onClick={() => {
          dispatch({ type: CLEAR_USER })
          setTimeout(()=>{
            navigate('/my')
            Toast.show({
              content: '退出登录成功',
              position: 'top'
          })
          },1500)
        }}>退出登录</div>
      </div>
    </div>
  )
}
